<template>
  <div class="go-in">
    <banner title="走进民邦" />
    <div class="section" v-loading="loading">
      <div class="section-content">
        <div class="content-summary">
          <div class="summary-left">
            <p class="title">公司简介</p>
            <p class="eTitle">ABOUT US</p>
            <p
              class="content"
              v-for="(text, index) in companyInfo"
              :key="index"
            >
              {{ text }}
            </p>
          </div>
          <div class="summary-right">
            <img src="../static/goIn.webp" alt />
          </div>
        </div>
        <el-divider class="el-divider-active">
          <i class="el-icon-arrow-down el-icon-arrow-down-active"></i>
        </el-divider>
        <div class="content-course">
          <div class="top">
            <h3>发展历程</h3>
            <p>DEVELOPMENT</p>
            <div class="border"></div>
          </div>
          <div class="timeline-container">
            <div class="timeline-line"></div>
            <div
              v-for="(item, index) in courseList"
              :key="index"
              class="timeline-item"
              :class="{
                'left-entry': index % 2 === 0,
                'right-entry': index % 2 !== 0,
              }"
            >
              <div class="timeline-dot"></div>
              <div class="timeline-card">
                <div class="timeline-year">{{ item.year }}</div>
                <div class="timeline-content">{{ item.content }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-honor">
          <div class="top">
            <h3>公司荣誉</h3>
            <p>HONOR</p>
            <div class="border"></div>
          </div>
          <ul class="honor-show">
            <li v-for="(honor, index) in honorList" :key="index">
              <img :src="imgServer + honor.img" />
            </li>
          </ul>
        </div>
        <!-- 团队风采 -->
        <div class="content-team">
          <div class="top">
            <h3>团队风采</h3>
            <p>TEAM</p>
          </div>
          <el-carousel :interval="4000" type="card" height="40vw">
            <el-carousel-item v-for="(team, index) in teamItem" :key="index">
              <img :src="imgServer + team.img" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="content-partner">
          <div class="top">
            <h3>合作伙伴</h3>
            <p>PARTNERS</p>
            <ul class="partner-img">
              <li v-for="(partner, i) in partnerImg" :key="i">
                <img :src="imgServer + partner.img" alt />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Banner from "../components/Banner";

const loading = ref(true);
const honorList = ref([]);
const partnerImg = ref([]);
const courseList = ref([]);
const teamItem = ref([]);
const companyInfo = ref([
  "民邦是一家集经营国际国内知名品牌服装、床饰家纺、针纺织品及家俬、房地产开发、餐饮娱乐、装饰装潢、风险投资等多元化产业发展为一体的综合性民营企业，民邦旗下公司累积注册资本达6000余万元，资产累计达3亿元人民币。员工近二百余人。",
  "集团旗下骨干主打企业有民邦·百寐纺织品公司、民邦家俬管理有限公司、民邦房地产开发有限公司。在孝感市长征路、文化路、城站路、北京路等黄金商业地段拥有房地产项目和多处经营实体，营业总面积达2万余平方米，年营业额达3.5亿。",
  "未来五到十年，湖北民邦集团在兼以地产、酒店、物流、风险投资等产业的同时，致力以纺织品、家私为依托，以生产、加工、连锁经营为主要发展方向，完成全国一级市场的布点，辐射全国二级市场，将民邦·百寐家纺连锁模式覆盖全国。努力将企业建设成为具有发展后劲、市场闯劲和抗风险能力的中型企业集团。",
]);
const imgServer = ref("http://www.dolmo.top:8888/api/img/name/resized_");

onMounted(() => {
  if (
    typeof window !== "undefined" &&
    typeof IntersectionObserver !== "undefined"
  ) {
    const targetSelectors = [
      ".content-summary",
      ".content-course",
      ".content-honor",
      ".content-team",
    ];

    const observer = new IntersectionObserver(
      (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const target = entry.target;
            const addAnimationClass = (className) =>
              target.classList.add(className);
            if (target.classList.contains("content-summary"))
              addAnimationClass("fadeIn");
            else if (target.classList.contains("content-course"))
              addAnimationClass("slideUp");
            else if (target.classList.contains("content-honor"))
              addAnimationClass("slideUp");
            else if (target.classList.contains("content-team"))
              addAnimationClass("slideUp");
            if (target.tagName === "SPAN") addAnimationClass("slideRight");
            if (target.tagName === "P") addAnimationClass("separateBottom");
            if (target.tagName === "H3") addAnimationClass("separateTop");
            observer.unobserve(target);
          }
        });
      },
      {
        root: null,
        rootMargin: "0px",
        threshold: 0,
      }
    );

    targetSelectors.forEach((selector) => {
      document
        .querySelectorAll(selector)
        .forEach((element) => observer.observe(element));
    });
  }
});

const [
  { data: honorData },
  { data: enterpriseData },
  { data: teamData },
  { data: courseData },
] = await Promise.all([
  baseFetch("honor/all"),
  baseFetch("enterprise/all"),
  baseFetch(`team/all`),
  baseFetch(`course/all`),
]);
honorList.value = honorData.value;
partnerImg.value = enterpriseData.value;
teamItem.value = teamData.value;

var groupCount = Math.ceil(courseData.value.length / 2);
for (let i = 0; i < groupCount; i++) {
  for (let j = 0; j < 2; j++) {
    if (courseData.value.length - 1 >= i * 2 + j) {
      courseList.value.push(courseData.value[i * 2 + j]);
    }
  }
}
loading.value = false;
</script>

<style lang="scss" scoped>
.timeline-container {
  position: relative;
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;

  .timeline-line {
    position: absolute;
    left: 50%;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #3c6088, #e13834);
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(60, 96, 136, 0.3);
  }
}
.timeline-item {
  position: relative;
  margin: 40px 0;
  opacity: 0;
  transition: all 0.8s ease;

  &.left-entry {
    animation: slideFromLeft 1s ease forwards;
    .timeline-card {
      left: calc(50% + 30px);
      &::before {
        right: 100%;
      }
    }
  }

  &.right-entry {
    animation: slideFromRight 1s ease forwards;
    .timeline-card {
      left: calc(50% - 480px);
      &::before {
        left: 100%;
      }
    }
  }

  .timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid #e13834;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(60, 96, 136, 0.3);
    z-index: 2;
  }

  .timeline-card {
    position: relative;
    width: 400px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(60, 96, 136, 0.1);
    transition: transform 0.3s ease;

    &::before {
      content: "";
      position: absolute;
      top: 20px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 12px 10px 0;
    }

    &:hover {
      transform: translateY(-5px);
    }

    .timeline-year {
      color: #e13834;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .timeline-content {
      color: #666;
      line-height: 1.6;
    }
  }
}
@media (max-width: 1000px) {
  .timeline-container {
    padding: 0 10px;

    .timeline-line {
      left: 30px !important;
      height: calc(100% - 40px);
    }

    .timeline-item {
      margin: 30px 0;

      &.left-entry,
      &.right-entry {
        .timeline-card {
          padding: 15px !important;
          width: calc(88%) !important;
          left: 50px !important;
          margin-right: 30px;
          &:active {
            transform: scale(0.98);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
          .timeline-year {
            font-size: 20px !important;
          }
          .timeline-content {
            font-size: 14px !important;
          }
          &::before {
            left: -10px !important;
            border-right-color: rgba(60, 96, 136, 0.1) !important;
            border-left: none !important;
          }
        }
      }
      .timeline-dot {
        left: 20px !important;
      }
    }
  }
}

@keyframes slideFromLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideFromRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideUpAnimation {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideRightAnimation {
  0% {
    transform: translateX(100rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes separateBottomAnimation {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes separateTopAnimation {
  0% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes imgBox {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 #ababab;
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 10px 5px #ababab;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 #ababab;
  }
}

.fadeIn,
.slideUp,
.slideRight,
.separateBottom,
.separateTop {
  animation-fill-mode: forwards;
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
}

.fadeIn {
  animation-name: fadeInAnimation;
}
.slideUp {
  animation-name: slideUpAnimation;
}
.slideRight {
  animation-name: slideRightAnimation;
  animation-duration: 1.2s;
}
.separateBottom {
  animation-name: separateBottomAnimation;
}
.separateTop {
  animation-name: separateTopAnimation;
}

* {
  margin: 0;
  padding: 0;
}

.go-in {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .section {
    width: 100%;

    .content-summary {
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 30px 0;

      .summary-left {
        width: 40vw;
        .title {
          font-size: 25px;
          color: #e13834;
        }
        .eTitle {
          font-size: 17px;
          color: #e13834;
          padding: 20px 0;
        }
        .content {
          color: #14679f;
          font-size: 14px;
          text-indent: 25px;
          line-height: 30px;
        }
      }
      .summary-right {
        width: 29vw;
        height: 20vw;
        img {
          width: 28vw;
          height: 19vw;
          animation: imgBox 4s infinite;
          border-radius: 15px;
        }
      }
    }

    @media screen and (max-width: 1000px) {
      .content-summary {
        flex-direction: column;
        .summary-left {
          width: 80%;
        }
        .summary-right {
          width: 52vw;
          height: 32vw;
          margin-top: 20px;
          img {
            width: 50vw;
            height: 30vw;
          }
        }
      }
    }

    .content-course {
      padding: 30px 0;
      .course-time {
        width: 90vw;
        margin: 0 auto;
      }
    }

    .content-honor {
      padding: 50px 0;
      .honor-show {
        width: 90%;
        margin: 30px auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1px;
        li {
          list-style: none;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      p {
        text-align: center;
        color: #3c6088;
      }
    }

    .content-team {
      padding: 1vw 2vw;
      .el-carousel {
        text-align: center;
        img {
          padding: 3vw;
          height: 30vw;
          width: 45vw;
        }
        @media screen and (max-width: 1000px) {
          .el-carousel__item--card {
            width: 65vw;
            height: 40vw;
            margin-left: -10vw;
          }
          img {
            height: 40vw;
            width: 65vw;
          }
        }
      }
    }

    .content-partner {
      padding: 50px 10vw;
      .partner-img {
        width: 100%;
        margin: 20px auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2px;
        li {
          list-style: none;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      @media screen and (min-width: 1000px) {
        .partner-img {
          width: 75%;
        }
      }
    }

    @media screen and (min-width: 1000px) {
      .content-honor {
        padding: 50px 100px;
      }
    }
  }
}

.el-divider--horizontal {
  margin: 1px 0;
}
.el-divider {
  background-color: red;
  height: 3px;
  .el-divider__text {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    color: #fff;
    border: 3px solid red;
  }
}
.el-divider-active {
  background-color: #3c6088;
}

.top {
  h3,
  p {
    text-align: center;
    color: #3c6088;
    font-weight: 400;
    padding: 10px 0;
  }
  h3 {
    font-size: 30px;
  }
  p {
    font-size: 20px;
  }
  .border {
    border-bottom: 1px solid #3c6088;
    width: 15%;
    margin: 0 auto;
  }
}
</style>
